<template>
	<view class="activity-container">
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input 
					v-model="searchKeyword" 
					placeholder="搜索活动" 
					@confirm="onSearch"
					class="search-input"
				/>
			</view>
		</view>
		
		<!-- 活动分类标签 -->
		<view class="category-tabs">
			<scroll-view scroll-x class="tab-scroll">
				<view class="tab-list">
					<view 
						v-for="(category, index) in categories" 
						:key="index"
						@click="selectCategory(index)"
						class="tab-item"
						:class="{ active: activeCategory === index }"
					>
						<text class="tab-text">{{ category.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper 
				class="banner-swiper" 
				indicator-dots 
				autoplay 
				interval="3000" 
				duration="500"
				indicator-color="rgba(255,255,255,0.5)"
				indicator-active-color="#ff6b6b"
			>
				<swiper-item v-for="(banner, index) in banners" :key="index">
					<image :src="banner.image" class="banner-image" @click="onBannerClick(banner)"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 活动列表 -->
		<view class="activity-list">
			<view v-if="filteredActivities.length === 0" class="empty-state">
				<text class="empty-icon">🎉</text>
				<text class="empty-text">暂无活动</text>
			</view>
			
			<view 
				v-for="activity in filteredActivities" 
				:key="activity.id"
				@click="viewActivity(activity)"
				class="activity-item"
			>
				<image :src="activity.image" class="activity-image"></image>
				
				<view class="activity-content">
					<view class="activity-header">
						<text class="activity-title">{{ activity.title }}</text>
						<view class="activity-status" :class="activity.status">
							<text class="status-text">{{ getStatusText(activity.status) }}</text>
						</view>
					</view>
					
					<text class="activity-desc">{{ activity.description }}</text>
					
					<view class="activity-info">
						<view class="time-info">
							<text class="time-label">活动时间:</text>
							<text class="time-text">{{ formatTime(activity.startTime) }} - {{ formatTime(activity.endTime) }}</text>
						</view>
						
						<view v-if="activity.participantCount" class="participant-info">
							<text class="participant-text">👥 {{ activity.participantCount }}人参与</text>
						</view>
					</view>
					
					<view v-if="activity.tags && activity.tags.length > 0" class="activity-tags">
						<text v-for="tag in activity.tags" :key="tag" class="tag">{{ tag }}</text>
					</view>
					
					<view v-if="activity.reward" class="reward-info">
						<text class="reward-label">🎁 奖励:</text>
						<text class="reward-text">{{ activity.reward }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部加载更多 -->
		<view v-if="hasMore" class="load-more" @click="loadMore">
			<text class="load-text">{{ loading ? '加载中...' : '加载更多' }}</text>
		</view>
		
		<view v-else class="no-more">
			<text class="no-more-text">没有更多活动了</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			activeCategory: 0,
			loading: false,
			hasMore: true,
			page: 1,
			categories: [
				{ name: '全部', type: 'all' },
				{ name: '限时抢购', type: 'flash_sale' },
				{ name: '优惠券', type: 'coupon' },
				{ name: '满减活动', type: 'discount' },
				{ name: '新人专享', type: 'newbie' },
				{ name: '会员专享', type: 'vip' },
				{ name: '签到有礼', type: 'checkin' },
				{ name: '邀请好友', type: 'invite' }
			],
			banners: [
				{
					id: 1,
					image: '/static/images/activity-banner1.jpg',
					link: '/pages/activity/detail?id=1'
				},
				{
					id: 2,
					image: '/static/images/activity-banner2.jpg',
					link: '/pages/activity/detail?id=2'
				},
				{
					id: 3,
					image: '/static/images/activity-banner3.jpg',
					link: '/pages/activity/detail?id=3'
				}
			],
			activities: [
				{
					id: 1,
					title: '新用户专享大礼包',
					description: '注册即送100元优惠券，首单立减50元',
					image: '/static/images/activity1.jpg',
					category: 'newbie',
					status: 'active',
					startTime: '2024-01-01 00:00:00',
					endTime: '2024-12-31 23:59:59',
					participantCount: 12580,
					tags: ['新人', '优惠券'],
					reward: '100元优惠券 + 首单立减50元'
				},
				{
					id: 2,
					title: '限时抢购 - 爆款商品1元起',
					description: '每日10点开抢，数量有限，先到先得',
					image: '/static/images/activity2.jpg',
					category: 'flash_sale',
					status: 'active',
					startTime: '2024-01-15 10:00:00',
					endTime: '2024-01-31 23:59:59',
					participantCount: 8960,
					tags: ['限时', '抢购'],
					reward: '超低价商品'
				},
				{
					id: 3,
					title: '满199减50 全场通用',
					description: '全场商品满199元立减50元，可叠加使用',
					image: '/static/images/activity3.jpg',
					category: 'discount',
					status: 'active',
					startTime: '2024-01-10 00:00:00',
					endTime: '2024-02-10 23:59:59',
					participantCount: 15420,
					tags: ['满减', '全场'],
					reward: '满199减50'
				},
				{
					id: 4,
					title: '会员专享 - 积分兑换好礼',
					description: '会员专享积分兑换，精美礼品等你来拿',
					image: '/static/images/activity4.jpg',
					category: 'vip',
					status: 'active',
					startTime: '2024-01-01 00:00:00',
					endTime: '2024-03-31 23:59:59',
					participantCount: 3280,
					tags: ['会员', '积分'],
					reward: '精美礼品'
				},
				{
					id: 5,
					title: '每日签到送积分',
					description: '连续签到7天送大礼包，积分可兑换商品',
					image: '/static/images/activity5.jpg',
					category: 'checkin',
					status: 'active',
					startTime: '2024-01-01 00:00:00',
					endTime: '2024-12-31 23:59:59',
					participantCount: 25680,
					tags: ['签到', '积分'],
					reward: '积分 + 连续签到大礼包'
				},
				{
					id: 6,
					title: '邀请好友送现金',
					description: '邀请好友注册下单，双方都有奖励',
					image: '/static/images/activity6.jpg',
					category: 'invite',
					status: 'ended',
					startTime: '2023-12-01 00:00:00',
					endTime: '2023-12-31 23:59:59',
					participantCount: 5890,
					tags: ['邀请', '现金'],
					reward: '现金奖励'
				}
			]
		}
	},
	
	computed: {
		filteredActivities() {
			let list = this.activities
			
			// 按分类筛选
			const selectedCategory = this.categories[this.activeCategory]
			if (selectedCategory.type !== 'all') {
				list = list.filter(activity => activity.category === selectedCategory.type)
			}
			
			// 按关键词搜索
			if (this.searchKeyword) {
				list = list.filter(activity => 
					activity.title.includes(this.searchKeyword) ||
					activity.description.includes(this.searchKeyword) ||
					(activity.tags && activity.tags.some(tag => tag.includes(this.searchKeyword)))
				)
			}
			
			return list
		}
	},
	
	onLoad() {
		this.loadActivities()
	},
	
	methods: {
		loadActivities() {
			// TODO: 从API加载活动列表
			console.log('加载活动列表')
		},
		
		onSearch() {
			console.log('搜索活动:', this.searchKeyword)
		},
		
		selectCategory(index) {
			this.activeCategory = index
		},
		
		onBannerClick(banner) {
			if (banner.link) {
				uni.navigateTo({
					url: banner.link
				})
			}
		},
		
		viewActivity(activity) {
			uni.navigateTo({
				url: `/pages/activity/detail?id=${activity.id}`
			})
		},
		
		getStatusText(status) {
			const statusMap = {
				active: '进行中',
				coming: '即将开始',
				ended: '已结束'
			}
			return statusMap[status] || '未知'
		},
		
		formatTime(timeStr) {
			if (!timeStr) return ''
			
			const date = new Date(timeStr)
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hour = String(date.getHours()).padStart(2, '0')
			const minute = String(date.getMinutes()).padStart(2, '0')
			
			return `${month}-${day} ${hour}:${minute}`
		},
		
		loadMore() {
			if (this.loading || !this.hasMore) return
			
			this.loading = true
			this.page++
			
			// TODO: 加载更多数据
			setTimeout(() => {
				this.loading = false
				// 模拟没有更多数据
				if (this.page >= 3) {
					this.hasMore = false
				}
			}, 1000)
		}
	}
}
</script>

<style scoped>
.activity-container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

/* 搜索头部 */
.search-header {
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.search-box {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 50rpx;
	padding: 0 30rpx;
	height: 70rpx;
}

.search-icon {
	font-size: 28rpx;
	color: #999;
	margin-right: 10rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	background: transparent;
	border: none;
}

/* 分类标签 */
.category-tabs {
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.tab-scroll {
	white-space: nowrap;
}

.tab-list {
	display: flex;
	padding: 0 30rpx;
}

.tab-item {
	padding: 30rpx 20rpx;
	margin-right: 40rpx;
	position: relative;
	flex-shrink: 0;
}

.tab-item.active .tab-text {
	color: #ff6b6b;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #ff6b6b;
	border-radius: 2rpx;
}

.tab-text {
	font-size: 28rpx;
	color: #666;
	white-space: nowrap;
}

/* 轮播图 */
.banner-section {
	padding: 20rpx 30rpx;
}

.banner-swiper {
	height: 300rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 活动列表 */
.activity-list {
	padding: 20rpx 0;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.activity-item {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.activity-image {
	width: 100%;
	height: 300rpx;
	object-fit: cover;
}

.activity-content {
	padding: 30rpx;
}

.activity-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15rpx;
}

.activity-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	flex: 1;
	margin-right: 20rpx;
}

.activity-status {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	flex-shrink: 0;
}

.activity-status.active {
	background-color: #e8f5e8;
}

.activity-status.coming {
	background-color: #fff3cd;
}

.activity-status.ended {
	background-color: #f8d7da;
}

.activity-status.active .status-text {
	color: #28a745;
}

.activity-status.coming .status-text {
	color: #856404;
}

.activity-status.ended .status-text {
	color: #721c24;
}

.status-text {
	font-size: 24rpx;
}

.activity-desc {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 20rpx;
}

.activity-info {
	margin-bottom: 20rpx;
}

.time-info {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.time-label {
	font-size: 24rpx;
	color: #999;
	margin-right: 10rpx;
}

.time-text {
	font-size: 24rpx;
	color: #666;
}

.participant-info {
	display: flex;
	align-items: center;
}

.participant-text {
	font-size: 24rpx;
	color: #666;
}

.activity-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
	margin-bottom: 20rpx;
}

.tag {
	font-size: 22rpx;
	color: #ff6b6b;
	background-color: #fff5f5;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	border: 1rpx solid #ff6b6b;
}

.reward-info {
	display: flex;
	align-items: center;
	background-color: #fff9e6;
	padding: 15rpx 20rpx;
	border-radius: 10rpx;
	border: 1rpx solid #ffd700;
}

.reward-label {
	font-size: 26rpx;
	color: #e6a23c;
	margin-right: 10rpx;
	font-weight: bold;
}

.reward-text {
	font-size: 26rpx;
	color: #e6a23c;
	flex: 1;
}

/* 加载更多 */
.load-more {
	padding: 40rpx;
	text-align: center;
}

.load-text {
	font-size: 28rpx;
	color: #666;
}

.no-more {
	padding: 40rpx;
	text-align: center;
}

.no-more-text {
	font-size: 24rpx;
	color: #999;
}
</style>